<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <charts :chart-info="lineChart" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
      <charts :chart-info="pie1" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
      <charts :chart-info="pie2" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
      <charts :chart-info="pie3" />
        </div>
      </el-col>
    </el-row>
    
  </div>
</template>

<script setup name="Index">
import { getChartInfo } from "@/api/dev/chart";
import PanelGroup from './dashboard/PanelGroup'
import Charts from '@/components/Charts/index'

const lineChart = ref(null);
const pie1 = ref(null);
const pie2 = ref(null);
const pie3 = ref(null);

function handleSetLineChartData(type) {
  getChartInfo(type).then(response=>{
    lineChart.value = response.data;
  })
}

getChartInfo('index_pie_1').then(response=>{
  pie1.value = response.data;
})

getChartInfo('index_pie_2').then(response=>{
  pie2.value = response.data;
})

getChartInfo('index_pie_3').then(response=>{
  pie3.value = response.data;
})

</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
